<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>
	<input type="button" id="btn" value="清空画布" name="">
	<input type="color" id="color" name="">
	
  <script>
		window.onload=function(ev){
			let clear = document.getElementById('btn');
			let cans=document.getElementById('cans');
			let oColor=document.getElementById('color');
			let cs=cans.getContext('2d');

			let colors='black';	//记录初始颜色
			oColor.onchange=function(){
				// alert(this.value);
				colors=this.value;//选择改变线条颜色
			}


			clear.addEventListener('click',function(){
				cans.height=cans.height;
			})
			let cx=400,cy=300,r=150;
			let startAng=30,endAng=70;

			cs.beginPath();
			cs.moveTo(cx,cy);

			//x=cx+sin(ang)*r;
			let x=cx+Math.sin(startAng*Math.PI/180)*r;
			//y=cy+sin(ang)*r;
			let y=cy-Math.cos(startAng*Math.PI/180)*r;

			cs.lineTo(x,y);

			cs.arc(cx,cy,r,(startAng-90)*Math.PI/180,(endAng-90)*Math.PI/180,false);




			cs.closePath();	
			// cs.stroke();
			cs.fillStyle='yellow';
			cs.fill();
			


			// cs.lineTo();

		}
  </script>
</body>
</html>
